import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import Delete from '#cpt/temp/Delete'
import AddEditModal from '#cpt/temp/AddEditModal'
// ===================================================================== Declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Box 					= $Lazy.load(()=>import('#tp/box/box'))
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		pids: [],
		selectedKeys:[],
		formData : [
			{ label: '接收人',		name: 'user_ids', full:true,	required: true, type:'treeSelect', multiple:false, filterName: 'label', loading:true },
		],
	}
	
	model = {}

	// 控制按钮
	query = {group_id: ''}
	
	componentDidMount(){
		this.getSelect()
		
	}
	
	load = ({ uuid }) => {
		console.log(uuid)
		this.query = { group_id: uuid }
		this.fetch()
	}
	
	// 获取下拉数据
	getSelect = () => {
		const { formData } = this.state
		
		$cache.then( async f => {
			$fn.setRow(formData, 'user_ids',  await f.getCache({ api: 'employee/departmentuser'}))
			const pids = formData[0]?.data.map(item => item.value)
			this.setState({ formData, pids })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this, 'work-group/groupUserList')

	// 表单
	cols = [
		{ title: '姓名', 		dataIndex: 'real_name' },
		{ title: '代码', 		dataIndex: 'empl_name' }
	]
	
	// 操作按钮
	controls = () => [
		Controls.add.call(this,{disabled: !this.query.group_id}),
		this.onDel()
	]
	
	onDel = uuid => Delete.call(this, 'work-group/groupUserDel', { uuid, isKeys: !uuid, idStr: 'uuids', param:{group_id: this.query.group_id} })
	
	render(){
		return (
			<>
				<Box title='分组人员'  className='ex ml5' flex contentClassName='rel fv xplr mt10' controls={this.controls()}>
					{/* 表格 */}
					{ Table.call(this, {wrapClassName: 'mlr'}) }
				</Box>
				{AddEditModal.call(this,{ title:'待办人员', width: 600, api: 'work-group/groupUserAdd', getSubmit:({user_ids}) => user_ids.filter(item => this.state.pids.includes(item) === -1), param: {group_id: this.query.group_id}})}
			</>
		)
	}
}

export default Index